<template>
  <div class="upload">
    <!--图片列表-->
    <vue-draggable v-model="imgList"
                   :item-key="(element) => element"
                   ghost-class="ghost"
                   @change="handleChange" class="upload-card">
      <template #item="{ element, index }">
        <div class="upload-card-item">
          <div class="upload-card-item-info">
            <img :src="element" class="upload-img"/>
            <div class="img-box-actions">
              <n-icon size="18" class="action-icon" @click="remove(index, element)">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <g fill="none">
                    <path
                        d="M12 1.75a3.25 3.25 0 0 1 3.245 3.066L15.25 5h5.25a.75.75 0 0 1 .102 1.493L20.5 6.5h-.796l-1.28 13.02a2.75 2.75 0 0 1-2.561 2.474l-.176.006H8.313a2.75 2.75 0 0 1-2.714-2.307l-.023-.174L4.295 6.5H3.5a.75.75 0 0 1-.743-.648L2.75 5.75a.75.75 0 0 1 .648-.743L3.5 5h5.25A3.25 3.25 0 0 1 12 1.75zm6.197 4.75H5.802l1.267 12.872a1.25 1.25 0 0 0 1.117 1.122l.127.006h7.374c.6 0 1.109-.425 1.225-1.002l.02-.126L18.196 6.5zM13.75 9.25a.75.75 0 0 1 .743.648L14.5 10v7a.75.75 0 0 1-1.493.102L13 17v-7a.75.75 0 0 1 .75-.75zm-3.5 0a.75.75 0 0 1 .743.648L11 10v7a.75.75 0 0 1-1.493.102L9.5 17v-7a.75.75 0 0 1 .75-.75zm1.75-6a1.75 1.75 0 0 0-1.744 1.606L10.25 5h3.5A1.75 1.75 0 0 0 12 3.25z"
                        fill="currentColor"></path>
                  </g>
                </svg>
              </n-icon>
            </div>
          </div>
        </div>
      </template>
      <template #footer v-if="showUploader">
        <!--上传图片-->
        <div
            class="upload-card-item upload-card-item-select-picture"
            style="width: 104px; height: 104px;"
            @click="handleUpload"
        >
          <div class="flex center column" style="width: 104px; height: 104px;text-align: center;">
            <n-icon size="18">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z" fill="currentColor"></path>
              </svg>
            </n-icon>
            <div class="upload-title">添加</div>
          </div>
        </div>
      </template>
    </vue-draggable>

  </div>

  <x-media-lib :modal-data="mediaLibData" @success="handleAddSuccess"/>
</template>

<script setup>
import {computed, ref, watch} from 'vue'
import VueDraggable from 'vuedraggable'
import {NIcon, useMessage} from 'naive-ui'
import XMediaLib from '@/components/x-media-lib.vue'
import {useMediaStore} from "@/store/media";

const message = useMessage()
const emits = defineEmits(['change'])

const props = defineProps({
  limit: {
    type: Number,
    required: true
  },
  urls: {
    type: Array,
    required: false,
  }
})
const mediaLibData = ref({
  show: false,
})
const imgList = ref([])
const showUploader = computed(() => imgList.value.length < props.limit)

function remove(index, url) {
  imgList.value.splice(index, 1)
  emits('change', imgList.value)
}

async function handleUpload() {
  mediaLibData.value.show = true
}

function handleAddSuccess(arr) {
  if (imgList.value.length + arr.length > props.limit) {
    return message.warning(`最多选择${props.limit}个，您还能选择${props.limit - imgList.value.length}个`)
  }
  imgList.value.push(...arr)
  mediaLibData.value.show = false
  emits('change', imgList.value)
}

function handleChange() {
  emits('change', imgList.value)
}

watch(() => props.urls, (value, oldValue) => {
  imgList.value = value
})
</script>

<style scoped lang="scss">

.upload {
  overflow: hidden;

  &-card {
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    &-item {
      margin: 4px;
      position: relative;
      padding: 8px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      width: 104px;
      height: 104px;

      &-info {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        overflow: hidden;
        display: flex;

        &:before {
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0;
          transition: all 0.3s;
          content: ' ';
        }

        &:hover {
          &:before {
            opacity: 1;
          }

          .img-box-actions {
            opacity: 1;
          }
        }

        .upload-img {
          width: 100%;
          height: 100%;
          margin: auto;
          object-fit: contain;
        }

        .upload-video {
          width: 100%;
          max-height: 100%;
          margin: auto;
        }

        .img-box-actions {
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 10;
          white-space: nowrap;
          transform: translate(-50%, -50%);
          opacity: 0;
          transition: all 0.3s;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .action-icon {
            margin: 0 5px;
            color: rgba(255, 255, 255, 0.85);

            &:hover {
              cursor: pointer;
              color: #fff;
            }
          }
        }
      }
    }

    &-item-select-picture {
      border: 1px dashed #d9d9d9;
      border-radius: 2px;
      cursor: pointer;
      background: #fafafa;
      color: #666;

      &:hover {
        background: #ffffff;
      }

      .upload-title {
        color: #666;
      }
    }
  }
}

.restriction-text {
  color: #9a9a9a;
}
</style>
